<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { addBanquetInsure } from '@/api/report'
	
	const user = useUserStore()
	const loading = ref(false)
	const buttonStyle = {
		width: '400rpx;',
		height: '84rpx',
		fontWeight: '600'
	}
	const buttonViewStyle = {
		width: '400rpx;',
		height: '84rpx',
		backgroundColor: '#FFFFFF',
		color: '#3c9cff',
		border: '2rpx solid #3c9cff;',
		fontWeight: '600'
	}
	const insurePopup = ref(null)
	const successPopup = ref(null)
	const uForm = ref(null)
	const form = ref({
		applyCode: "",
		corporation: 0,
		sponsorName: ""
	})
	const rules = ref({
		applyCode: [
			{required: true, message: '请输入投保宴席', trigger: 'blur'}
		],
		corporation: [
			{type: 'number', required: true, message: '请选择保险公司', trigger: 'change'}
		],
		sponsorName: [
			{required: true, message: '请输入投保人姓名', trigger: 'blur'}
		]
	})
	const companyList = ['中国人保']
	
	function goBuy() {
		insurePopup.value.open()
	}
	function goView() {
		uni.navigateTo({url: '/pages/Organizers/declaration/list/list'})
	}
	function companyChange(e) {
		let index = e.detail.value
		form.value.corporation = index
	}
	function success() {
		uForm.value.validate().then(() => {
			loading.value = true
			let params = uni.$uv.deepClone(form.value)
			params.corporation = companyList[form.value.corporation]
			addBanquetInsure(params).then(res => {
				loading.value = false
				insurePopup.value.close()
				successPopup.value.open()
			}).catch(() => loading.value = false)
		})
	}
	function closeSuccess() {
		successPopup.value.close()
	}
	function confirmSuccess() {
		closeSuccess()
	}
	
	onLoad((option) => {
		if(option.code) {
			form.value.applyCode = option.code
			form.value.sponsorName = option.sponsorName
		}
	})
</script>

<template>
	<view :class="['app-container', user.theme]">
		<view class="app-content">
			<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-05-07/1746605095337_success.png"
				width="406" height="292"></uv-image>
			<text class="success-title">申报成功</text>
			<text class="success-tip">建议尽快为本次活动购买活动保险</text>
			<view class="success-btn">
				<uv-button type="primary" shape="circle" text="立即购买保险" :custom-style="buttonStyle" @click="goBuy"></uv-button>
				<uv-button shape="circle" text="查看申报列表" :custom-style="buttonViewStyle" @click="goView"></uv-button>
			</view>
		</view>
		<uv-popup ref="insurePopup" closeable mode="center" bgColor="none">
			<view class="popup-box">
				<view class="popup-head">
					<text class="head-main">100万</text>
					<text class="head-sub">事故赔偿金</text>
					<text class="head-tip">最高限额</text>
					<image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-05-07/1746607110365_insure-tip.png"
						class="head-img" />
				</view>
				<view class="popup-content">
					<view class="insure-info">
						<view class="info-item">
							<view class="item-label">投保方案</view>
							<view class="item-value">100桌以内</view>
						</view>
						<view class="info-item">
							<view class="item-label">每人赔偿额</view>
							<view class="item-value">10万</view>
						</view>
					</view>
					<view class="insure-content">
						<text>参考保费：100元/场</text>
						<text>保险期限：5天</text>
					</view>
					<view class="insure-tip">以上方案来自平安食品安全责任险，仅供参考</view>
					<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<uv-form-item label="投保宴席" prop="sponsorName" required borderBottom>
								<view class="custom-content">
									<text>{{form.applyCode}}</text>
								</view>
							</uv-form-item>
							<uv-form-item label="保险公司" prop="corporation" required borderBottom>
								<picker @change="companyChange" :value="form.corporation" :range="companyList">
									<view class="custom-content">
										<text :class="form.corporation === undefined? 'text-no' : ''">
											{{form.corporation === undefined? '请选择保险公司' : companyList[form.corporation]}}
										</text>
										<uv-icon name="arrow-right" color="#54504D" size="30" />
									</view>
								</picker>
							</uv-form-item>
							<uv-form-item label="投保人" prop="sponsorName" required borderBottom>
								<uv-input v-model="form.sponsorName" placeholder="请输入投保人姓名" border="none" inputAlign="right" maxlength="32" clearable />
							</uv-form-item>
							<view class="form-box-bottom">
								<uv-button color="linear-gradient(0deg, #EF7426 0%, #FE924E 100%)" shape="circle" text="立即购买" 
									:custom-style="{height: '84rpx'}" @click="success" :disabled="loading"></uv-button>
							</view>
						</view>
					</uv-form>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="successPopup" closeable mode="center" bgColor="none">
			<view class="popup-box white">
				<view class="popup-title">咨询成功</view>
				<view class="popup-content">
					<view class="success-box">
						<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-05-07/1746605095337_success.png"
							width="406" height="292"></uv-image>
						<text class="success-title">收到您的咨询</text>
						<text class="success-tip">客服将尽快进行回访，请保持电话畅通</text>
					</view>
				</view>
				<view class="popup-bottom">
					<uv-button type="primary" plain shape="circle" text="取消" :custom-style="{width: '295rpx'}" @click="closeSuccess"></uv-button>
					<uv-button type="primary" shape="circle" text="确定" :custom-style="{width: '295rpx'}" @click="confirmSuccess"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-content{
			padding: 200rpx 74rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16rpx;
			.success-title{
				margin-top: 32rpx;
				font-weight: 600;
				font-size: var(--theme-xxxl);
				line-height: var(--theme-xxxl-line);
			}
			.success-tip{
				color: #626466;
			}
			.success-btn{
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;
				gap: 32rpx;
				::v-deep .uv-button__text{
					font-size: var(--theme-lg) !important;
				}
			}
		}
		.popup-box{
			width: 686rpx;
			background: linear-gradient( 180deg, #FDE6C9 0%, #FFECD9 100%);
			border-radius: 16rpx;
			padding: 24rpx;
			&.white{
				background: #FFFFFF;
			}
			.popup-head{
				padding: 30rpx 8rpx 46rpx;
				display: flex;
				align-items: flex-end;
				position: relative;
				.head-main{
					font-weight: 600;
					font-size: var(--theme-xxxl);
					line-height: var(--theme-xxxl-line);
					color: #FF6F00;
				}
				.head-sub{
					font-weight: 600;
					font-size: var(--theme-xl);
					line-height: var(--theme-xl-line);
				}
				.head-tip{
					margin-left: 14rpx;
					font-size: var(--theme-sm);
					color: #626466;
				}
				.head-img{
					position: absolute;
					right: 40rpx;
					top: -8rpx;
					width: 154rpx;
					height: 168rpx;
					z-index: 1;
				}
			}
			.popup-title{
				padding-bottom: 24rpx;
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
			}
			.popup-content{
				z-index: 10;
				.insure-info{
					width: 100%;
					padding: 16rpx 24rpx;
					background: url(https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-05-07/1746607947840_insure-info.png);
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					gap: 152rpx;
					.info-item{
						width: calc(100% - 76rpx);
						display: flex;
						flex-direction: column;
						gap: 14rpx;
						.item-label{
							font-size: var(--theme-sm);
							line-height: var(--theme-sm-line);
						}
						.item-value{
							color: #FF6F00;
							font-weight: 600;
							font-size: var(--theme-xl);
							line-height: var(--theme-xl-line);
						}
					}
				}
				.insure-content{
					margin: 28rpx 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.insure-tip{
					padding: 6rpx;
					background-color: #F2D2AD;
					border-radius: 24rpx;
					color: #8B6447;
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
					text-align: center;
				}
				.success-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 16rpx;
					.success-title{
						margin-top: 32rpx;
						font-weight: 600;
						font-size: var(--theme-xxxl);
						line-height: var(--theme-xxxl-line);
					}
					.success-tip{
						color: #626466;
					}
				}
			}
			.popup-bottom{
				padding-top: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 32rpx;
			}
		}
		.form-box{
			margin-top: 24rpx;
			background-color: #fff;
			padding: 0 32rpx;
			.custom-content{
				display: flex;
				justify-content: flex-end;
				gap: 10rpx;
			}
			.text-disable{
				color: #727687;
			}
			.text-no{
				color: #c0c4cc;
			}
			::v-deep .uv-form-item__body{
				padding: 32rpx 0;
			}
			::v-deep .uv-form-item__body__left__content__required{
				left: unset;
				right: -8rpx;
			}
			::v-deep .uv-form-item__body__left__content__label {
				font-size: var(--theme-df);
			}
			::v-deep .uv-input__content__field-wrapper__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-form-item__body__right__message{
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
			::v-deep .uv-form-item__body__right__content{
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			.form-box-bottom{
				padding: 32rpx 0;
				::v-deep .uv-button__text{
					font-size: var(--theme-lg) !important;
				}
			}
		}
	}
</style>